<template>
    <div class="character_card">
        <div class="card-box" ref="Ref_CardBox">
            <div :ref="`CardRef${index + 1}`" v-for="(item, index) in funList" :key="index" class="card"
                @mousemove="_Mouse_Move($event, `CardRef${index + 1}`)">
                <div class="content" :style="{ backgroundImage: `url('src/assets/imgs/character/icon${index}.png')` }"
                    @click="_Go_Fun(item)">
                    {{ item }}
                </div>
            </div>
        </div>
        <div class="dim-box dim-left" @click="_Scroll(-500)">
            <svg t="1749024950955" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
                p-id="1232" width="48" height="48">
                <path
                    d="M668.135049 190.188538L346.323587 512l321.811462 321.811462a47.906433 47.906433 0 0 1-67.747681 67.74768L244.699072 545.87384a47.906433 47.906433 0 0 1 0-67.74768L600.387368 122.440858a47.906433 47.906433 0 1 1 67.747681 67.74768z"
                    fill="var(--theme-color2)" p-id="1233"></path>
            </svg>
        </div>
        <div class="dim-box dim-right" @click="_Scroll(500)">
            <svg t="1749024917085" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
                p-id="926" width="48" height="48">
                <path
                    d="M725.043899 546.382846L369.648031 902.177934a47.890464 47.890464 0 0 1-67.687797-67.767642L623.502222 512.499025 301.960234 190.587758a47.890464 47.890464 0 0 1 67.687797-67.767641l355.395868 355.795088a47.955337 47.955337 0 0 1 0 67.767641z"
                    fill="var(--theme-color2)" p-id="927"></path>
            </svg>
        </div>
    </div>
</template>
<script setup>
import { ref, getCurrentInstance, onMounted, onUnmounted } from 'vue'
const { proxy } = getCurrentInstance()

const Ref_CardBox = ref(null)

const funList = ['查询', '查询', '查询', '查询', '查询', '查询', '查询', '查询', '查询', '查询', '查询', '查询', '查询', '查询']

let animationFrameId = null

const _Mouse_Move = (e, thisRef) => {
    if (!proxy.$refs[thisRef][0]) return

    // 取消之前的动画帧以避免重叠
    if (animationFrameId) {
        cancelAnimationFrame(animationFrameId)
    }

    animationFrameId = requestAnimationFrame(() => {
        const rect = proxy.$refs[thisRef][0].getBoundingClientRect()
        const centerX = rect.left + rect.width / 2
        const centerY = rect.top + rect.height / 2
        const maxTilt = 10 // 倾斜角度

        // 计算鼠标相对于卡片中心的位置
        const offsetX = (e.clientX - centerX) / (rect.width / 2)
        const offsetY = (e.clientY - centerY) / (rect.height / 2)
        // 交换offsetY和offsetX实现自然倾斜方向
        const tiltY = offsetX * -maxTilt
        const tiltX = offsetY * maxTilt

        proxy.$refs[thisRef][0].style.transform = `
            perspective(1000px)
            rotateX(${tiltX}deg)
            rotateY(${tiltY}deg)`
        proxy.$refs[thisRef][0].style.backgroundPosition = '20% 90%'
    })
}

const _Go_Fun = (distinguish) => {
}

const _Scroll = (value) => {
    Ref_CardBox.value.scrollBy({
        left: value,
        behavior: 'smooth'
    });
}

onMounted(() => {
})

onUnmounted(() => {
    if (animationFrameId) cancelAnimationFrame(animationFrameId)
})

</script>
<style scoped lang="scss">
.character_card {
    width: 100%;
    box-sizing: border-box;
    border-top: solid 1px var(--theme-color2);
    border-bottom: solid 1px var(--theme-color2);
    overflow: hidden;

    .dim-box {
        width: 2vw;
        height: 420px;
        margin-top: -420px;
        position: relative;
        z-index: 1;
        background-color: #ffffff10;
        backdrop-filter: blur(8px);
        transition: all 0.2s;
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;

        &:hover {
            background-color: #ffffff50;
        }

        &:active {
            background-color: var(--theme-color1);
        }
    }

    .dim-left {
        float: left;
        border-radius: 0 50% 50% 0;
    }

    .dim-right {
        float: right;
        margin-right: -1px;
        border-radius: 50% 0 0 50%;
    }

    .card-box {
        display: flex;
        width: 100%;
        padding: 10px 0;
        overflow-x: auto;

        &::-webkit-scrollbar {
            display: none;
        }

        .card {
            flex: 0 0 auto;
            width: 220px;
            height: 300px;
            margin: 30px;
            padding: 20px;
            background: linear-gradient(30deg, var(--theme-color2) 50%, #FFF 50%);
            border-radius: 10px;
            transition: transform 0.1s ease-out;
            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);
            cursor: pointer;

            &:hover {

                .content::before,
                .content::after {
                    width: calc(100% - 23px);
                    height: calc(100% - 23px);
                }
            }
        }



        .content {
            background-color: var(--theme-color1);
            background-size: cover;
            background-position: center;
            width: 100%;
            height: 100%;
            transform: translateZ(30px);
            padding: 20px;
            box-sizing: border-box;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 50px;
            font-family: 'Handsome';
            color: #fff;

            &::before {
                content: "";
                width: 20px;
                height: 20px;
                border: 2px solid var(--theme-color2);
                position: absolute;
                z-index: 2;
                transition: .3s;
                top: 10px;
                right: 10px;
                border-bottom-width: 0;
                border-left-width: 0;
            }

            &::after {
                content: "";
                width: 20px;
                height: 20px;
                border: 2px solid var(--theme-color2);
                position: absolute;
                z-index: 2;
                transition: .3s;
                bottom: 10px;
                left: 10px;
                border-top-width: 0;
                border-right-width: 0;
            }
        }
    }
}
</style>